<template>
	<view class="container">
		<Navigator2 :title="$t('device.confirmOrder')"></Navigator2>
		
		<!-- 支付倒计时 -->
		<view class="countdown-section">
			<text class="countdown-label">{{ $t('device.paymentRemainingTime') }}</text>
			<text class="countdown-time">{{ countdownText }}</text>
		</view>
		
		<!-- 支付金额 -->
		<view class="amount-section">
			<text class="currency">¥</text>
			<text class="amount">{{ amount }}</text>
		</view>
		
		<!-- 支付方式选择 -->
		<view class="payment-methods">
			<radio-group @change="radioChange">
				<label class="payment-item">
					<view class="payment-info">
						<text class="payment-name">{{ $t('device.wechatPayment') }}</text>
					</view>
					<radio value="wechat" :checked="selectedMethod === 'wechat'" color="#0256FF" />
				</label>
				
				<label class="payment-item">
					<view class="payment-info">
						<text class="payment-name">{{ $t('device.alipay') }}</text>
					</view>
					<radio value="alipay" :checked="selectedMethod === 'alipay'" color="#0256FF" />
				</label>
			</radio-group>
		</view>
		
		<!-- 确认支付按钮 -->
		<view class="confirm-section">
			<button class="confirm-btn" @click="confirmPayment">{{ $t('device.confirmPayment') }}</button>
		</view>
	</view>
</template>

<script>
	import api from '@/js/api.js'
	import Navigator2 from '../../components/Navigator2.vue';
	export default {
		data() {
			return {
				orderId: '',
				amount: '49.00',
				selectedMethod: 'wechat',
				countdown: 896, // 14分56秒 = 896秒
				timer: null,
				business: '',
				createTime: ''
			}
		},
		computed: {
		countdownText() {
			const minutes = Math.floor(this.countdown / 60);
			const seconds = Math.floor(this.countdown % 60);
			return `${minutes}:${seconds.toString().padStart(2, '0')}`;
		}
		},
		mounted() {
			// this.startCountdown();
		},
		beforeDestroy() {
			if (this.timer) {
				clearInterval(this.timer);
			}
		},
		onLoad(param) {
			console.log('cloneVoicePay onLoad param: ', param)
			this.orderId = param.orderId
			this.business = param.business
			this.createTime = param.createTime

			this.countdown = (new Date(this.createTime).getTime() + 1000 * 60 * 15 - new Date().getTime()) / 1000
			this.startCountdown();
		},
		methods: {
			startCountdown() {
				this.timer = setInterval(() => {
					if (this.countdown > 0) {
						this.countdown--
					} else {
						clearInterval(this.timer)
						// 倒计时结束，处理订单超时
						this.handleTimeout()
					}
				}, 1000)
			},
			handleTimeout() {
				uni.showToast({
					title: this.$t('device.orderTimeout'),
					icon: 'none'
				})
				// 返回上一页或跳转到相应页面
				setTimeout(() => {
					uni.navigateBack()
				}, 1500)
			},
			radioChange(e) {
				this.selectedMethod = e.detail.value
			},
			confirmPayment() {
				if (!this.selectedMethod) {
					uni.showToast({
						title: this.$t('device.pleaseSelectPaymentMethod'),
						icon: 'none'
					})
					return
				}
				
				// 这里实现支付逻辑
				uni.showToast({
					title: this.$t('device.using') + (this.selectedMethod === 'wechat' ? this.$t('device.wechatPayment') : this.$t('device.alipay')),
					icon: 'none'
				});

				// api.getPayScheme(this.orderId, this.business, 'trial').then(res => {
				// 	console.log('getPayScheme res:', res)
				// 	if (res != null) {
				// 		const url = res
				// 		// 使用webview组件打开url
				// 		uni.navigateTo({
				// 			url: '/pages/webview/webview?url=' + encodeURIComponent(url)
				// 		})
				// 	}
				// })
				
				plus.share.getServices(res => {
					let wxx = null;
					wxx = res.find(item => item.id === 'weixin')
					if (wxx) {
						wxx.launchMiniProgram({
							id: "gh_7d992853ca68",//微信小程序原生id
							path: "pages/device/paycontainer?orderId=" + this.orderId + "&business=" + this.business + "&createTime=" + Math.floor(new Date(this.createTime).getTime() / 1000) + "&amount=" + this.amount, //    打开小程序的页面路径，默认跳转首页
							type: 2 //     微信小程序版本类型，可取值： 0-正式版； 1-测试版； 2-体验版。 默认值为0。
						})
					} else {
						uni.showToast({
							title: '请安装微信',
							icon: 'none'
						})
					}
				}, err => {});
			}
		},
		components: {
			Navigator2
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #F1F2F5;
	}
	
	.countdown-section {
		text-align: center;
		padding: 60rpx 0 10rpx 0;

		color: #707A89;
		font-size: 12px;
		
		.countdown-label {
			display: inline;
			margin-right: 20rpx;
		}
		
		.countdown-time {
			display: inline;
		}
	}
	
	.amount-section {
		display: flex;
		justify-content: center;
		align-items: end;
		text-align: center;
		padding: 10rpx 0 20rpx 0;
		margin-bottom: 60rpx;
		
		.currency {
			font-size: 40rpx;
			color: #1F2937;
			margin-right: 20rpx;
		}
		
		.amount {
			font-size: 80rpx;
			color: #1F2937;
			font-weight: 600;
			line-height: 1;
		}
	}
	
	.payment-methods {
		background-color: #fff;
		margin: 0 40rpx;
		border-radius: 12rpx;
		
		radio-group {
			width: 100%;
			display: block;
		}
		
		.payment-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 40rpx;
			position: relative;
			width: 100%;
			box-sizing: border-box;
			margin: 0;
			transition: all 0.3s ease;
			box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
			
			&:hover {
				background-color: #f8f9fa;
				border-radius: 12rpx;
			}
			
			&:active {
				background-color: #e9ecef;
				border-radius: 12rpx;
			}
			
			&:last-child {
				border-bottom: none;
			}
			
			.payment-info {
				flex: 1;
				
				.payment-name {
					font-size: 32rpx;
					color: #141619;
				}
			}
		}
	}
	
	.confirm-section {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 30rpx 40rpx;
		padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
		background-color: #fff;
		
		.confirm-btn {
			width: 100%;
			height: 96rpx;
			background-color: #0256FF;
			color: #fff;
			border: none;
			border-radius: 16rpx;
			font-size: 32rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			&:active {
				background-color: #0245D6;
			}
		}
		
		.confirm-btn::after {
			border: none;
		}
	}
</style>
